<template>
  <div class="user-wrapper">
    <Banner/>
    <Category/>
    <HotItem/>
    <AD/>
    <About :info=info />
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'

import Banner from "@/components/banner";
import Category from "./components/category";
import HotItem from "./components/hotItem";
import AD from "@/components/ad";
import About from "@/components/about";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "user",
  components: {
    Banner,
    Category,
    HotItem,
    AD,
    About
  },
  data() {
    return {
      info:{}
    };
  },
  computed: {
    // ...mapGetters([
    //   'name',
    //   'avatar',
    //   'roles'
    // ])
  },
  methods: {},
  created(){
      http.get(this, {
        url: "article/detail",
        data:{
            id: 339
        },
        dataType: "json",
        success: function(data) {
            console.log('about:', data);
            if (data.status == 1) {
              this.info = data.info;
            }
        }
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
